<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta content="telephone=no" name="format-detection">
	<!--if IE meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')-->
	<!--if lt IE 9 script(src='http://html5shiv.googlecode.com/svn/trunk/html5.js')-->
	<title>Scrolla - jQuery plugin for reveal animations when scrolling</title>
	<link rel="stylesheet" href="dist/demo.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
	<header>
		<div class="wrapper">
			<h1 class="animate" data-animate="rubberBand" data-duration="1.0s" data-delay="0.1s" data-iteration="3">Scrolla</h1>
			<p class="animate" data-animate="rubberBand" data-duration="1.0s" data-delay="0.2s">jQuery plugin for reveal animations when scrolling</p>
			<a href="https://github.com/maximzhurkin/jquery-scrolla/archive/master.zip" class="button animate" data-animate="jello" data-duration="1.0s" data-delay="0.3s">Download plugin</a>
		</div>
	</header>

	<section class="section section-demo">
		<!-- data-animate: 动画类型
		data-duration: 动画持续时间
		data-delay: 动画延迟时间 -->
		<div class="wrapper">
			<div class="items group">
				<div class="item">
					<div class="block animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s"></div>
				</div>
				<div class="item">
					<div class="block animate" data-animate="fadeInRight" data-duration="1.0s" data-delay="0.2s"></div>
				</div>
				<div class="item">
					<div class="block animate" data-animate="rubberBand" data-duration="1.0s" data-delay="0.0s">12</div>
				</div>
				<div class="item">
					<div class="block animate" data-animate="fadeInDown" data-duration="1.0s" data-delay="0.1s"></div>
				</div>
				<div class="item">
					<div class="block animate" data-animate="fadeInUp" data-duration="1.0s" data-delay="0.2s"></div>
				</div>
				<div class="item">
					<div class="block animate" data-animate="rotateInUpRight" data-duration="1.0s" data-delay="0.3s"></div>
				</div>
				<div class="item">
					<div class="block offset animate" data-animate="bounceIn" data-duration="2.0s" data-delay="0.4s" data-offset="100"></div>
				</div>
			</div>
		</div>
	</section>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="dist/scrolla.jquery.min.js"></script>

	<script>

	$('.animate').scrolla({
		mobile: false, // 是否允许在移动设备上执行滚动动画。
		once: true // 设置为true时，滚动动画只执行一次。
	});

	</script>

</body>
</html>
